<!--
 * @Description: 我的订单页面组件
 * @Author: hai-27
 * @Date: 2020-02-20 17:21:54
 * @LastEditors: hai-27
 * @LastEditTime: 2020-02-27 13:36:27
 -->
<template>
  <div class="order">
    <!-- 我的订单头部 -->
    <div class="order-header">
      <div class="order-header-content">
        <p>
          <i
            class="el-icon-s-order"
            style="font-size: 30px; color: #ff6700"
          ></i>
          我的订单
        </p>
      </div>
    </div>
    <!-- 我的订单头部END -->

    <!-- 我的订单主要内容 -->
    <div class="order-content" v-if="tableData.length > 0">
      <template>
        <el-table :data="tableData" class="tab" style="width: 80%">
          <el-table-column fixed prop="order_id" label="订单编号" width="200">
          </el-table-column>
          <el-table-column prop="order_address" label="订单地址" width="200">
          </el-table-column>
          <el-table-column prop="order_user_id" label="用户id" width="100">
          </el-table-column>
          <el-table-column
            prop="order_sum_price"
            label="订单总金额"
            width="100"
          >
          </el-table-column>
          <el-table-column prop="order_date" label="订单日期" width="200">
          </el-table-column>
          <el-table-column  label="订单详情" width="">
            <template slot-scope="scope">
              <el-button
                @click="handleEdit(scope.$index, scope.row)"
                type="text"
                size="small"
                >订单详情</el-button>
            </template>
          </el-table-column>
          <el-table-column  label="操作" width="200">
            <template slot-scope="scope">
              <el-button v-if="scope.row.order_status<=3" @click.native.prevent="deleteRow(scope.$index, scope.row)" type="text" size="small">确认收货</el-button>
              <el-button v-else :disabled="true" type="text" size="small">已收货</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template>
        <el-dialog title="订单详情" :visible.sync="editVisible" width="50%">
          <el-table :data="gridData">
            <el-table-column
              property="goods_id"
              label="商品编号"
              width="100"
            ></el-table-column>
            <el-table-column
              property="goods_name"
              label="商品名字"
              width="100"
            ></el-table-column>
            <el-table-column
              property="original_price"
              label="商品价格"
              width="100"
            ></el-table-column>
            <el-table-column
              property="discounted_price"
              label="商品原价"
              width="100"
            ></el-table-column>
            <el-table-column
              property="order_item_count"
              label="商品数量"
              width="100"
            ></el-table-column>
          </el-table>
          <div class="font">订单状态</div>
          <el-steps :space="200" :active="order_status" finish-status="success">
            <el-step title="待确认"></el-step>
            <el-step title="已确认"></el-step>
            <el-step title="已发货"></el-step>
            <el-step title="已收货"></el-step>
          </el-steps>
          <span slot="footer" class="dialog-footer"> </span>
        </el-dialog>
      </template>
      <div class="fenye">
        <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="total"
        :page-count="pages"
        @current-change="currentChange">
      </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 订单列表
      gridData: [], // 每个订单的商品数量及总价列表
      editVisible: false,
      order_status: "",
      show: false,
      pageNum:1,
      pageSize:8,
      total:0,
      pages:0,
    };
  },
  activated() {
    // 获取订单数据
    this.jiazai();
  },
  methods: {
    currentChange(currentPage){
      console.log(currentPage)
      this.$axios
      .post("http://localhost:8080/group3/user/userSelectOrder", {
            user_id: this.$store.getters.getUser.user_id,
            pageNum:currentPage,
            pageSize:this.pageSize
          })
          .then(res=>{
            console.log(res)
            this.total=res.data.orders.total
            this.tableData = res.data.orders.list;
            
          })

    },
    deleteRow(index, row) {
            this.$confirm('是否确认收获?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(() => {
                this.$message({
                    type: 'success',
                    message: '确认成功!',
                });
                console.log(row.order_id)
                let that = this
                this.$axios({
                    method: 'post',
                    url: 'http://localhost:8080/group3/user/userupdate',
                    data: {
                        order_id:row.order_id
                    },
                    headers: { 'Content-Type': 'application/json' } //加上这个
                })
                .then(function(res) {
                  console.log(res)
                that.jiazai();
            })
            })
            .catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消确认'
                });          
            });
        },

      jiazai(){
          this.$axios
          .post("http://localhost:8080/group3/user/userSelectOrder", {
            user_id: this.$store.getters.getUser.user_id,
            pageNum:this.pageNum,
            pageSize:this.pageSize
          })
          .then((res) => {
            console.log(res.data);
            if (res.data.code === "001") {
              this.total=res.data.orders.total
              this.tableData = res.data.orders.list;
            } else {
              this.notifyError("出现错误");
            }
          })
          .catch((err) => {
            return Promise.reject(err);
          });
      },

    handleEdit(index, row) {
      var mm = this.tableData[index].order_status;
      this.order_status = mm;
      // console.log(row.order_id)
      this.order_id = row.order_id;
      console.log(this.order_id);
      this.editVisible = true;
      let that = this;
      this.$axios({
        method: "post",
        url: "http://localhost:8080/group3/user/selectitem",
        data: {
          order_id: that.order_id,
        },
        headers: { "Content-Type": "application/json" }, //加上这个
      }).then(function (res) {
        console.log(res);
        that.gridData = res.data;
      });
    },
  },
  watch: {
    // 通过订单信息，计算出每个订单的商品数量及总价
    orders: function (val) {
      let total = [];
      for (let i = 0; i < val.length; i++) {
        const element = val[i];

        let totalNum = 0;
        let totalPrice = 0;
        for (let j = 0; j < element.length; j++) {
          const temp = element[j];
          totalNum += temp.product_num;
          totalPrice += temp.product_price * temp.product_num;
        }
        total.push({ totalNum, totalPrice });
      }
      this.total = total;
    },
  },
};
</script>
<style scoped>
.order {
  background-color: #f5f5f5;
  padding-bottom: 20px;
}
/* 我的订单头部CSS */
.order .order-header {
  height: 64px;
  border-bottom: 2px solid #ff6700;
  background-color: #fff;
  margin-bottom: 20px;
}
.order .order-header .order-header-content {
  width: 1225px;
  margin: 0 auto;
}
.order .order-header p {
  font-size: 28px;
  line-height: 58px;
  float: left;
  font-weight: normal;
  color: #424242;
}
/* 我的订单头部CSS END */
.order .content {
  width: 1225px;
  margin: 0 auto;
  background-color: #fff;
  margin-bottom: 50px;
}
.tab {
  margin: auto;
}
.fenye{
  text-align: center;
}
</style>